<!--
 * @Description:银行卡卡片组件
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-6-1 9:10:00
 * @LastEditors: Wang Xi
 * @LastEditTime: 2023-6-1 18:30:00
-->
<template>
	<view class="bank-card-container">
		<view class="card-no">
			<text v-for="(item,index) in noList" :key="index">{{item}}</text>
		</view>
		<view class="user-date" v-if="false">
			<view class="user">
				<p>持卡人</p>
				<p>{{data.userName}}</p>
			</view>
			<view class="date" v-if="false">
				<p>截止日期</p>
				<p>{{data.date}}</p>
			</view>
		</view>
		<u-icon v-if="data.id" class="card-del-btn" size="40" @click="$emit('del')" color="#fff" name="trash"></u-icon>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				default: () => ({
					bankNo: '1234123412341234',
					userName: '王林',
					date: '6/22'
				}),
				type: Object
			}
		},
		data() {
			return {

			}
		},
		computed: {
			noList() {
				const no = this.publicJS.tryGet(() => this.data.bankNo) || ''
				const list = ['', '', '', '', '']
				let temp = 0
				for (let i = 1; i <= no.length; i++) {
					list[temp] = list[temp] + no[i - 1]
					if ((i) % 4 == 0) {
						temp++
					}
				}
				return list
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.bank-card-container {
		background-image: url('@/static/images/bankCard-bg.png');
		background-size: cover;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		position: relative;

		.card-del-btn {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}

		.card-no {
			color: RGBA(255, 255, 255, 0.87);
			font-size: 40rpx;
			padding: 126rpx 24rpx 0 40rpx;
			display: flex;
			justify-content: space-between;
		}

		.user-date {
			display: flex;
			color: RGBA(255, 255, 255, 0.87);
		}
	}
</style>